<!-- 抽屉组件 -->
<template>
  <div class="drawerView">
    <div class="song-relate-info" :class="isShow ? 'show' : ''" @click="open">
      <ul class="song-relate-tabs" :class="isShow ? 'active-tab spread' : ''">
        <li :class="selectClass(index)" @click="selectActive($event, index)" v-for="(item, index) in recommendReason" :key="index">
          <span class="txt">{{ item }}</span>
        </li>
      </ul>
      <div class="relate-info spread">
        <div ref="o" @touchend="handleScrollx()">
          <div class="m-moreLists spread" v-if="recommendReason.includes('相似歌单')" ref="a">
            <h2>包含这首歌的歌单</h2>
            <ul>
              <li v-for="(item, index) in relatedplaylist" :key="index" @click="$router.push(`/songlist?id=${item.id}`)">
                <figure class="cover u-cover">
                  <img :src="item.coverImgUrl" alt="" />
                  <span>{{ num(item.playCount) }}</span>
                </figure>
                <h3>{{ item.name }}</h3>
                <p class="sub">
                  <span class="author">
                    by {{ item.creator.nickname }}
                    <span class="icn" :class="item.creator.authStatus ? 'u-tag u-tag-daren' : item.creator.authority ? 'u-tag u-tag-dareng' : ''"></span>
                  </span>
                </p>
              </li>
            </ul>
          </div>
          <div class="m-moreSongs spread" v-if="recommendReason.includes('相似歌曲')" ref="b">
            <h2>喜欢这首歌的人也听</h2>
            <ul class="m-card">
              <li class="item" v-for="(item, index) in similarsongs" :key="index" @click="playSong(item.id, item.fee)">
                <figure class="cover u-cover">
                  <img :src="item.album.blurPicUrl" alt="song" />
                </figure>
                <article class="cnt">
                  <h3>{{ item.name }}</h3>
                  <p class="sub f-thide">{{ singer(item.album.artists) }} - {{ item.album.name }}</p>
                </article>
                <i class="play f-vc spread">
                  <van-icon name="play-circle-o" size="24px" />
                </i>
              </li>
            </ul>
          </div>
          <div class="m_newcomm" v-if="hotcomments.length" ref="c">
            <h4>精彩评论</h4>
            <CommentView :comment="hotcomments"></CommentView>
          </div>
          <div class="m_newcomm" v-else @touchend="active = recommendReason.findIndex((item) => item == '精彩评论')">
            <h4>
              最新评论
              <span>({{ total }})</span>
            </h4>
            <CommentView :comment="comments"></CommentView>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { RelatedPlaylistByIdAPI, SimilarSongsByIdAPI, songCommentsAPI } from '@/api'
import CommentView from './CommentView.vue'
import { numberFormat } from '@/utils/common'
import { singer } from '@/utils/dedicated'
import { Dialog } from 'vant'
export default {
  name: 'drawerView',
  components: { CommentView },
  data() {
    return {
      id: this.$route.query.id, //获取当前页面的id值
      active: 0, // 选中状态
      isShow: false, //是否显示抽屉
      recommendReason: [], //抽屉选项卡
      relatedplaylist: [], //相关歌单
      similarsongs: [], //相似歌曲
      hotcomments: [], //精彩评论
      comments: [], //最新评论
      total: 0, //评论数量
    }
  },
  computed: {
    // 切换标签页样式
    selectClass() {
      return (index) => {
        return (this.active == index) & this.isShow ? 'active' : ''
      }
    },
    //格式化播放量
    num() {
      return (val) => {
        return numberFormat(val)
      }
    },
    //名字格式化
    singer,
  },
  methods: {
    // 打开抽屉
    open() {
      if (!this.isShow) {
        this.isShow = true
      }
    },
    // 关闭抽屉
    close() {
      if (this.isShow) {
        this.isShow = false
      }
    },
    // 切换标签页
    selectActive(e, index) {
      this.active = index
      if (e.target.innerText == '相似歌单') {
        this.$el.querySelector('.m-moreLists').scrollIntoView({ block: 'start', behavior: 'smooth' })
      } else if (e.target.innerText == '相似歌曲') {
        this.$el.querySelector('.m-moreSongs').scrollIntoView({ block: 'start', behavior: 'smooth' })
      } else {
        this.$el.querySelector('.m_newcomm').scrollIntoView({ block: 'start', behavior: 'smooth' })
      }
    },
    //关联样式
    handleScrollx() {
      if (this.$refs.c.getBoundingClientRect().top < 125) {
        this.active = this.recommendReason.findIndex((item) => item == '精彩评论')
      } else if (this.$refs.b.getBoundingClientRect().top < 125) {
        this.active = this.recommendReason.findIndex((item) => item == '相似歌曲')
      } else {
        this.active = this.recommendReason.findIndex((item) => item == '相似歌单')
      }
    },
    // 相似歌单
    async Related() {
      await RelatedPlaylistByIdAPI(this.id).then((res) => {
        this.relatedplaylist = res.data.playlists.splice(0, 3)
        if (this.relatedplaylist) {
          this.recommendReason.push(this.relatedplaylist[0].recommendReason)
        }
      })
      await this.Similar()
    },
    // 相似歌曲
    async Similar() {
      await SimilarSongsByIdAPI(this.id).then((res) => {
        this.similarsongs = res.data.songs
        if (this.similarsongs) {
          this.recommendReason.push(this.similarsongs[0].recommendReason)
        }
      })
      await this.song()
    },
    // 精彩评论
    song() {
      songCommentsAPI({ id: this.id }).then((res) => {
        this.hotcomments = res.data.hotComments.slice(0, 10)
        this.comments = res.data.comments.slice(0, 10)
        this.total = res.data.total
        if (res.data.hotComments.length || res.data.comments.length) {
          this.recommendReason.push('精彩评论')
        }
      })
    },
    // 播放歌曲限制
    playSong(id, fee) {
      if (fee == 8) {
        sessionStorage.setItem('isBack', false)
        this.$router.push(`/transferStop?id=${id}`)
      } else if (fee == 4) {
        Dialog.alert({
          message: '唱片公司要求该歌曲须付费,购买数字专辑后即可畅听~',
          theme: 'round-button',
        })
      } else if (fee == 1) {
        Dialog.alert({
          message: '当前歌曲为VIP歌曲,购买VIP服务后即可畅听~',
          theme: 'round-button',
        })
      } else {
        Dialog.alert({
          message: '由于版权保护,您所在的地区暂时无法使用',
          theme: 'round-button',
        })
      }
    },
  },
  created() {
    this.Related()
  },
}
</script>

<style lang="scss" scoped>
.drawerView {
  height: 100vh;
  background-color: #080705;
}
.song-relate-info {
  height: 600px;
  bottom: -539px;
  transition: all 0.2s ease-in 0s;
  display: flex;
  width: 100%;
  border-radius: 24px 24px 0 0;
  position: fixed;
  left: 0;
  z-index: 102;
  flex-direction: column;
  overflow: hidden;
  background-color: rgba(31, 30, 30);
  .song-relate-tabs {
    position: relative;
    z-index: 10;
    flex: none;
    height: 58px;
    box-sizing: border-box;
    padding-top: 30px;
    display: flex;
    width: 100%;
    border-radius: 24px 24px 0 0;
    color: hsla(0, 0%, 100%, 0.2);
    li {
      flex: 1;
      text-align: center;
      height: 28px;
      .txt {
        display: inline-block;
        font-size: 16px;
        padding: 0 6px 2px;
        font-size: 16px;
      }
    }
    .active {
      color: #ff3a3a;
      span {
        border-bottom: 2px solid #ff3a3a;
      }
    }
  }
  .active-tab.spread {
    background: #fff;
    color: #333;
  }
  .song-relate-tabs:after {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    content: '';
    display: block;
    width: 54px;
    height: 5px;
    border-radius: 5px;
    background: hsla(0, 0%, 100%, 0.1);
  }
  .active-tab::after {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    content: '';
    display: block;
    width: 54px;
    height: 5px;
    border-radius: 5px;
    background: rgba(51, 51, 51, 0.1);
  }
  .relate-info {
    flex: 1;
    box-sizing: border-box;
    overflow: auto;
    position: relative;
    transition: all 0.2s ease-in;
    > div {
      position: relative;
      padding-bottom: 1px;
      transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
      transition-duration: 0ms;
      transform: translateX(0px) translateY(-20px) translateZ(0px);
    }
  }
  .relate-info.spread {
    top: 5px;
  }
  .m-moreLists.spread {
    margin-top: 20px;
    .cover {
      border-radius: 4px;
    }
    .sub {
      color: #999;
      padding: 0;
    }
  }
  .m-moreLists {
    line-height: 1.6;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    > h2 {
      margin: 0;
      color: #333;
      font-weight: 700;
      padding-left: 16px;
      font-size: 17px;
    }
    > ul {
      padding: 0 16px;
      margin-top: 12px;
      display: flex;
      // justify-content: space-between;
      li:first-child {
        margin-left: 0;
      }
      li {
        // margin-left: 10px;
        // flex: 1;
        width: 33%;
      }
    }
    .cover {
      width: 103.34px;
      height: 103.34px;
      position: relative;
      overflow: hidden;
      margin: 0;
      > img {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        display: block;
        height: 100%;
      }
      > span {
        position: absolute;
        right: 5px;
        top: 2px;
        z-index: 3;
        padding-left: 13px;
        color: #fff;
        font-size: 12px;
        background-position: 0;
        background-repeat: no-repeat;
        background-size: 11px 10px;
        background-image: url('../assets/img/erji.svg');
      }
    }
    h3 {
      color: #333;
      padding: 0;
      margin: 2px 0 -1px;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
    }
    .sub {
      position: relative;
      font-size: 12px;
      height: 20px;
      overflow: hidden;
      margin: 0;
    }
    .author {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      position: relative;
      float: left;
      .icn {
        position: absolute;
        top: 4px;
        right: -13px;
      }
      .u-tag {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url('../assets/img/commenticn.png') no-repeat;
        background-size: 30px auto;
      }
      .u-tag-daren {
        background-position: -15px 0;
      }
      .u-tag-dareng {
        background-position: 0 -15px;
      }
    }
  }
  .u-cover {
    background: url('../assets/img/changpian.png') no-repeat;
    background-position: 50%;
    background-size: 100% auto;
  }
  .m-moreSongs {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    margin-top: 20px;
    line-height: 1.6;
    > h2 {
      margin: 0;
      color: #333;
      font-weight: 700;
      padding-left: 16px;
      font-size: 17px;
    }
    .m-card {
      margin-top: 10px;
      .item {
        padding: 7px 0 0 16px;
        height: 40px;
        position: relative;
        overflow: hidden;
        .cover {
          border-radius: 3px;
          overflow: hidden;
          width: 40px;
          height: 40px;
          float: left;
          margin: 0 10px 0 0;
        }
        .u-cover {
          position: relative;
          background: url('../assets/img/changpian.png') no-repeat;
          background-position: 50%;
          background-size: 100% auto;
          img {
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
        .cnt {
          padding-bottom: 7px;
          padding-right: 40px;
          height: 100%;
          h3 {
            margin: 0;
            color: #333;
            line-height: 18px;
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;
            font-weight: 400;
          }
          p.sub {
            color: #999;
            margin-top: 2px;
            font-size: 14px;
            margin-bottom: 0;
          }
          .f-thide {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;
          }
        }
        .cnt:after {
          border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
        }
        .play.spread {
          color: rgba(0, 0, 0, 0.5);
          position: absolute !important;
          right: 15px;
          top: 50%;
          transform: translateY(-50%);
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .m_newcomm {
    position: relative;
    margin-top: 18px;
    h4 {
      margin: 0;
      padding: 0 0 0 16px;
      line-height: 25px;
      color: #333;
      font-size: 17px;
      font-weight: 700;
      background-color: rgba(0, 0, 0, 0);
    }
  }
}
.show {
  bottom: 0;
  background-color: #fff;
}
</style>
